
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{$Think.config.APP_NAME}</title>
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<load href="Public/css/style.css" />
<load href="Public/css/theme.css" />
<load href="Public/css/icons.css" />
<load href="Public/js/jquery.min.js" />
</head>
<body data-tuktuk="boxes">
    <aside id="menu" class="absolute bck light column_3">
        <header class="bck dark">
            <div class="session on-left">
                <strong>{$Think.config.APP_NAME}</strong>
            </div>
            <a href="#" data-box="close" class="on-right text big icon remove color white"></a>
        </header>
        <article class="bck light scroll">
            <nav data-tuktuk="menu" class="text bold">
                <a href="#" >基本资料</a>
                <a href="#" >首页设计</a>
                <a href="#" >样式管理</a>
            </nav>
            <hr />
            <div class="margin">
                <strong class="text big normal block ">风格样式</strong>
            </div>
            <hr />
            <nav data-tuktuk="menu" class="text bold">
                <a href="#" >主题选择</a>
                <a href="#" >首页设计</a>
                <a href="#" >样式管理</a>
            </nav>
            <hr />

            <div class="margin">
                <strong class="text big normal block ">内容管理</strong>
            </div>
            <hr />
            <nav data-tuktuk="menu" class="text bold">
                <a href="#">页面导航</a>
                <a href="#">内容管理</a>
            </nav>

            <hr />
            <div class="margin">
                <strong class="text big normal block ">营销推广</strong>
            </div>
            <hr />
            <nav data-tuktuk="menu" class="text bold">
                <a href="#" >最新活动</a>
            </nav>
            <hr />
            <div class="margin">
                <strong class="text big normal block ">APP生成</strong>
            </div>
            <hr />
            <nav data-tuktuk="menu" class="text bold">
                <a href="#" >发布部署</a>
            </nav>

            
        </article>
    </aside>

    <aside class="column_3">
        <header class="bck theme">
            <strong>{$Think.config.APP_NAME}</strong>
            <a href="#" class="on-right text big icon menu" data-tuktuk-box="menu"></a>
        </header>
        <article class="bck dark scroll">
          <div class="phone-device responsive padding-top ">
            <iframe width="100%" id="ifrmname" name="ifrmname" height="380" frameborder="0" scrolling="on" src="{:U("Mobile/Index/index?appid=$appinfo[id]")}"></iframe>
            <button class="tiny refresh-device">刷新</button>
          </div>

        </article>
    </aside>


    <section>
        <header>
            <h3 class="on-left text thin">{$Think.config.APP_NAME}</h3>
            <a href="{:U('Admin/Index/chooseApp')}" class="on-right text big icon list" >切换</a>
        </header>
        <hr />
        <article class="padding scroll">
            <div class="margin-bottom">
                <h4 class="text book inline">APP图标设计</h4>
                <nav class="inline on-right">
                    <a href="#" class="button theme btn-upfile"><span class="icon upload"></span></span>上传</a>
                </nav>
            </div>
            <div class="row">
            <div class="column_1 ">
              <div class="icon-preview center margin-top">
                <notempty name="appinfo[icon]" >
                <img class="app-icon" src="{$appinfo.icon}">
                <else/>
                <img src="Public/icon_tpl/1s.png">
                </notempty>
              </div>
                <div class="app-icon-text center"></div>
            </div>
            <div class="column_8">
              <div class="column_4">
              <form id="form" name="form" class="margin-top">
                <fieldset>
                    <label>文字:<small>APP图标文字</small></label>
                    <input type="text" name="app_title">
                </fieldset>
              </form>
              </div>
              <div class="column_11 margin-top">
                <a class="choose-icon" href="choose-icon"><img src="Public/icon_tpl/1s.png"><span class="icon ok app-icon-ok"></span></a>
                <a class="choose-icon" href="choose-icon"><img src="Public/icon_tpl/2s.png"><span class="icon ok app-icon-ok"></span></a>
                <a class="choose-icon" href=""><img src="Public/icon_tpl/3s.png"><span class="icon ok app-icon-ok"></span></a>
                <a class="choose-icon" href="choose-icon"><img src="Public/icon_tpl/4s.png"><span class="icon ok app-icon-ok"></span></a>
                <a class="choose-icon" href="choose-icon"><img src="Public/icon_tpl/5s.png"><span class="icon ok app-icon-ok"></span></a>
                <a class="choose-icon" href="choose-icon"><img src="Public/icon_tpl/6s.png"><span class="icon ok app-icon-ok"></span></a>
                <a class="choose-icon" href="choose-icon"><img src="Public/icon_tpl/7s.png"><span class="icon ok app-icon-ok"></span></a>
                <a class="choose-icon" href="choose-icon"><img src="Public/icon_tpl/8s.png"><span class="icon ok app-icon-ok"></span></a>
                <a class="choose-icon" href="choose-icon"><img src="Public/icon_tpl/9s.png"><span class="icon ok app-icon-ok"></span></a>
                <a class="choose-icon" href="choose-icon"><img src="Public/icon_tpl/10s.png"><span class="icon ok app-icon-ok"></span></a>
                <a class="choose-icon" href="choose-icon"><img src="Public/icon_tpl/11s.png"><span class="icon ok app-icon-ok"></span></a>
              </div>
            </div>
            </div>
            <button class="theme create-app-icon">保存</button>
            <div class="margin" >
                <a class="button theme" target="_blank" href="http://www.tuyaya.com/">专业在线制作</a>
                <span class="text right">专业的在线制作图片工具,在线制作完毕之后,再下载上传.128x128大小的png格式图标</span>
            </div>
            <hr />
            <div class="margin-bottom">
                <h4 class="text book inline">启动画面设计</h4>
                <nav class="inline on-right">
                    <a href="#" class="button theme upfile-startpic"><span class="icon upload"></span></span>上传</a>
                </nav>
            </div>
            <div class="row">
            <div class="column_2 ">
              <div class="startpic-preview center margin-top">
                <notempty name="appinfo[start_pic]" >
                <img class="app-start-pic" width="180" src="{$appinfo.start_pic}">
                <else/>
                <img width="180" class="app-start-pic" src="Public/startpic_tpl/1.png">
                </notempty>
              </div>
              <div class="app-icon">
                <img class="app-start-icon" src="{$appinfo.icon}">
              </div>
              <div class="app-start-text center"></div>
            </div>
            <div class="column_8">
              <form id="form" name="form" class="margin-top">
              <div class="row">
              <div class="column_4">
                <fieldset>
                    <label>文字:<small>启动文字</small></label>
                    <input type="text" name="start_title">
                </fieldset>
              </div>
              <!-- <div class="column_4">
                <fieldset>
                    <label>图标:<small>是否显示图标</small></label>
                    <input type="checkbox" value="1" checked name="is_show">
                </fieldset>
              </div> -->
              </div>
              </form>
              <div class="column_11 margin-top">
                <a class="choose-startpic" href=""><img width="180" src="Public/startpic_tpl/1.png"><span class="icon ok app-icon-ok"></span></a>
                <a class="choose-startpic" href=""><img width="180" src="Public/startpic_tpl/2.png"><span class="icon ok app-icon-ok"></span></a>
                <a class="choose-startpic" href=""><img width="180" src="Public/startpic_tpl/3.png"><span class="icon ok app-icon-ok"></span></a>
                <a class="choose-startpic" href=""><img width="180" src="Public/startpic_tpl/4.png"><span class="icon ok app-icon-ok"></span></a>
              </div>
            </div>
            </div>
            <button class="theme create-app-startpic">保存</button>
            <div class="margin" >
                <a class="button theme" target="_blank" href="http://www.tuyaya.com/">专业在线制作</a>
                <span class="text right">专业的在线制作图片工具,在线制作完毕之后,再下载上传.320x480大小的png格式图片</span>
            </div>
            <hr />
        </article>

        <footer class="bck dark text center">
            Powered by <a href="http://www.weiduniang.com" class="color theme text bold">Weiduniang</a>
        </footer>
    </section>

    
</body>
<load href="Public/js/app.js" />
<load href="Public/js/jquery.upload.js" />
<script type="text/javascript">
$(function(){


  $('.refresh-device').on('click',function(){
    document.getElementById('ifrmname').contentWindow.location.reload(true);
  })

  $('.choose-startpic').on('click',function(){
    event.preventDefault()
    var icon = $(this).find('img').attr('src');
    $(this).parent().parent().find('.app-icon-ok').hide();
    $(this).find('.app-icon-ok').show();
    $('.startpic-preview').find('img.app-start-pic').attr('src',icon);
  })

  $('.choose-icon').on('click',function(){
    event.preventDefault()
    var icon = $(this).find('img').clone();
    $(this).parent().parent().find('.choose-icon').find('.app-icon-ok').hide();
    $(this).find('.app-icon-ok').show();
    $('.icon-preview').html(icon);
  })

  //上传图标
  $('.btn-upfile').on('click',function(){
    event.preventDefault()
    $.upload({
        url: "{:U('Admin/Index/uploadIcon')}", //上传地址
        fileName: "file",    //文件名称。用于后台接收
        params: {},         //参数
        dataType:"json",
        onComplate: function (resq) {  //上传完成
          $('.icon-preview').find('img').attr('src',resq['url']);
        },
    });
  })

  //上传启动画面
  $('.upfile-startpic').on('click',function(){
    event.preventDefault()
    $.upload({
        url: "{:U('Admin/Index/uploadStartpic')}", //上传地址
        fileName: "file",    //文件名称。用于后台接收
        params: {},         //参数
        dataType:"json",
        onComplate: function (resq) {  //上传完成
          $('img.app-start-pic').attr('src',resq['url']);
        },
    });
  })



  $('[name=is_show]').on('click',function(){
    if ($(this).is(":checked")===true) {
      $('.app-start-icon').parent().show();
    }else{
      $('.app-start-icon').parent().hide();
    }
  })

  //创建图标
  $('.create-app-icon').on('click',function(){
    var img = $('.icon-preview').find('img').attr('src');
    var appTitle = $('[name=app_title]').val();
    var url = "{:U('Admin/Index/createAppIcon')}";
    if (appTitle == "") {
      alert('文字不能为空');
      return false;
    };
    $.post(url,{img:img,appTitle:appTitle},function(resq){
    })
  })

  //创建启动画面
  $('.create-app-startpic').on('click',function(){
    var img = $('img.app-start-pic').attr('src');
    var startTitle = $('[name=start_title]').val();
    var url = "{:U('Admin/Index/createAppStartpic')}";
    $.post(url,{img:img,startTitle:startTitle},function(resq){
      console.log(resq);
    })
  })

  

  //start_title
  $('[name=start_title]').on('keydown',function(){
    var txt = $(this).val();
    $('.app-start-text').text(txt);
  })
  $('[name=start_title]').on('change',function(){
    var txt = $(this).val();
    $('.app-start-text').text(txt);
  })

  $('[name=app_title]').on('keydown',function(){
    var txt = $(this).val();
    txt = txt.substring(0, 1);
    $('.app-icon-text').text(txt);
  })
  $('[name=app_title]').on('change',function(){
    var txt = $(this).val();
    txt = txt.substring(0, 1);
    $('.app-icon-text').text(txt);
  })
})  
</script>
</html>
